<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="UTF-8" name="viewport" id="viewportMeta" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="/public/css/note-program/main.css">
    <link rel="stylesheet" href="/public/css/note-program/aside-selection.css">
    <link rel="stylesheet" href="/public/css/note-program/text-display.css">
    <link rel="stylesheet" href="/public/editor.md/css/editormd.min.css" />
    <link rel="stylesheet" href="/public/editor.md/css/editormd.preview.css" />
    <link rel="stylesheet" href="/public/css/note-program/reset.css">
    <link rel="stylesheet" href="/public/css/note-program/header.css">
</head>

<body>
<div id="r_menu" class="vpopmenu">
<div id="trash" onclick="trash();">删除该笔记</div>
</div>
<!--外部容器-->
<div class="top-bar-wrapper">
    <!-- 中间主体部分容器 -->
    <div class="top-bar">

        <!-- 网站的logo -->
        <h1 class="logo">
            <!-- 此处建议写上网站首页的地址 -->
            <a href="/">
                <img src="../../public/resources/logo.png">
                <span>成为更好的自己</span>
            </a>
        </h1>


        <!-- 菜单栏 -->
        <div class="left-menu">
            <!-- 创建菜单图标 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>


            <!-- 创建菜单 -->
            <ul class="nav">
                <!-- 这里都要写在超链接里面 -->
                <!-- 超链接的地址，写各个页面的地址 -->
                <li><a href="./../myPlan/myTodo.html">个人计划</a></li>
                <li><a href="./../note-program/index.html">我的笔记</a></li>
                <li><a href="./../minder/mind.html">思维导图</a></li>
                <li><a href="./../dataStatistics/dataStatistics.html">数据统计</a></li>
                <li><a href="./../square/square.html">广场</a></li>
            </ul>

        </div>


        <!-- 用户信息 -->
        <div class="user-info">
            <!-- 这里是可以跳转到用户信息详细设置页的，写用户信息详细设置页的地址 -->
            <a href="javascript:void(0);" id="turnUserInfo">
                <img src="../../public/resources/user-pic.jpg" alt="用户头像">
            </a>
        </div>
    </div>
</div>

<div class="mobile-header">
    <form id="form1">
        <select id="switch" style="width:130px;"></select>
        <select id="selection" style="width:130px;"></select>
    </form>
</div>

<div class="container">
    <aside>
        <details class="note-div" id="all-notes-tag">
            <summary>笔记本</summary>
            <h4 onclick="new_notebook();">新建笔记本</h4>
            <ul id="all-notebooks"></ul>
        </details>
    </aside>
    <main>
        <div class="notes">
            <div class="note-info-find" id="note-navi">
                <p id="header">在创建笔记之前，请先新建笔记本哦~</p>
                <div class="note-add">
                    <p id="number">共0条笔记</p>
                    <p id="add" onclick="create_new_note();">新建笔记</p>
                </div>
                <div class="box">
    	            <input type="text" class="input" placeholder="请输入您要搜索的笔记">
    	            <input type="button" value="search" class="button" onclick="search_note();">
                </div>
            </div>
            <div class="note-infos" id="all-notes"></div>
        </div>
        <div class="note-detail" id="editor">
            <div class="welcome">
                Welcome！
            </div>
        </div>
    </main>
</div>

<script src="/public/js/note-program/main.js"></script>
<script src="/public/js/note-program/book_struct.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="/public/editor.md/editormd.min.js"></script>
<script src="/public/editor.md/lib/marked.min.js"></script>
<script src="/public/editor.md/lib/prettify.min.js"></script>
<script src="/public/editor.md/lib/raphael.min.js"></script>
<script src="/public/editor.md/lib/underscore.min.js"></script>
<script src="/public/editor.md/lib/sequence-diagram.min.js"></script>
<script src="/public/editor.md/lib/flowchart.min.js"></script>
 <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="/public/editor.md/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript">

    function view_note(book_title,note_title){
        if(window.screen.width>=651){
            let url=`/single-note?book_title=${book_title}&&note_title=${note_title}`;
            request('GET',url,null,(res)=>{
                document.getElementById('editor').innerHTML=`
                    <div class="click-to-edit" onclick="start_edit('${book_title}','${note_title}');">进入编辑界面</div>
                    <div id="test-editormd-view2">
                        <textarea class="editormd-markdown-textarea" id="append-test" name="test-editormd-markdown-doc" style="display: none;">${res}</textarea>
                    </div>
                `;
                editormd_load();
            })
        }
        else{
            window.location.href=`/preview?book_title=${book_title}&&note_title=${note_title}`;
        }
    }
    function editormd_load(){
        const testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            tocm            : true,    // Using [TOCM]
            emoji           : true,
            taskList        : true,
            tex             : true,  //开启公式显示会导致滚动条异常，我也不知道为什么
            flowChart       : true,  
            sequenceDiagram : true,  
        });
    }
    bindMenu();
    var menu = document.getElementById("r_menu");
    function bindMenu(){
        let $BIPanel = $("div[class='note-infos']").contextmenu(function(ev) {
            console.log(ev.originalEvent.path[1].onclick)
            if(ev.originalEvent.path[1].onclick){
                let oEvent = ev || event;
                //自定义的菜单显示
                menu.style.display = "block";
                //让自定义菜单随鼠标的箭头位置移动
                menu.style.left = oEvent.clientX + "px";
                menu.style.top = oEvent.clientY + "px";
                document.getElementById('trash').onclick=function(){
                    let del=window.confirm('确认删除该笔记？');
                    if(del){
                        let str=ev.originalEvent.path[1].onclick+'';
                        let r = /["|'](.*)["|']/;
                        let ans=str.match(r)[0]+'';
                        ans=ans.split(",");
                        delete_note(eval(ans[0]),eval(ans[1]));
                    }
                }
                return false;
            } 
    	});
    }
    //实现点击document，自定义菜单消失
    document.onclick = function() { 
        menu.style.display = "none";
    }
</script>
</body>

</html>